/* 1.引入创建上下文函数  */
import React, { Component, createContext} from "react";

/* 2.通过createContext 创建上下文 */
let {
  Provider, //提供值
  Consumer, // 获取值
} = createContext();
/* 
    跨组件传值
*/

class Dome extends Component {
  render() {
    return (
      <div>
        <h1>Dome组件</h1>
        <DeomChild></DeomChild>
      </div>
    );
  }
}

class DeomChild extends Component {
  render() {
    return (
      /* 4.通过Consumer 接收值 */
        <Consumer>{(value)=>{
          return <div>
            <h1>DeomChild组件:{value.msg}</h1>
            <button onClick={value.handleClick}>点击变🐂</button>
            </div>
        
        }}</Consumer>
    );
  }
}

class App extends Component {
  state ={
    msg:"🐖"
  }
  handleClick =(params) => {
    this.setState({
      msg:"🐂"
    })
  }
  render() {
    return (
      <div>
        {/* 3.通过父组件Provider 传值 */}
        <Provider value={{ msg: this.state.msg ,handleClick:this.handleClick}}>
          <Dome></Dome>
        </Provider>
      </div>
    );
  }
}

export default App;
